<template>
	<view class="nav" :class="show ?'navShow':'navHide'">
		<view class="nav_cover" @click="open"></view>
		<view class="nav_sidebar">
			<view class="nav_sidebar_user" v-if="user.info.name">
				<view class="nav_sidebar_user_avatar">
					<rui-icons icon="user-full" size="130" color="#fff"></rui-icons>
				</view>
				<view class="nav_sidebar_user_name">
					{{user ? user.info.name: "未登录"}}
				</view>
				<view class="nav_sidebar_user_expired">
					{{user ? "到期时间："+user.info.expired_at: "请先登录后操作"}}
				</view>
			</view>

			<view class="nav_sidebar_user" v-else>
				<view class="login_head">
					<view class="login_head_welcome">
						欢迎使用云游归属查询
					</view>
					<view class="login_head_desc">
						专为旅游行业开发设计
					</view>
				</view>
			</view>
			<view class="nav_sidebar_body">
				<view class="login"  v-if="!user.info.name">
					<view class="login_form">
						<view class="login_form_item">
							<input type="text" v-model="form.username" class="login_form_item_input"
								placeholder="请输入用户名" />
						</view>
						<view class="login_form_item">
							<input type="password" v-model="form.password" class="login_form_item_input"
								placeholder="请输入密码" />
						</view>
						<view class="login_form_item" v-if="login_type == 'register'">
							<input type="password" v-model="form.password2" class="login_form_item_input"
								placeholder="请再次输入密码" />
						</view>

						<view class="login_form_item">
							<button class="login_form_item_button" @click="onSubmit">{{login_type == 'login' ? '登录':'注册'}}</button>
						</view>
						<view class="login_form_tips" @click="onRegister"  v-if="login_type == 'login'">
							还没有账号？
						</view>
						<view class="login_form_tips" @click="onLogin"  v-if="login_type == 'register'">
							有账号立即登录？
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="nav_sidebar_body">
				<view class="nav_sidebar_body_head">
					<view class="nav_sidebar_body_head_name">兑换会员</view>
					<view class="nav_sidebar_body_head_btn">兑换</view>
				</view>

				<view class="nav_sidebar_body_form">
					<view class="nav_sidebar_body_form_item">
						<input type="text" class="nav_sidebar_body_form_item_input" v-model="etForm.url"
							placeholder="请输入兑换码">
					</view>
				</view>
				<view class="nav_sidebar_body_tips">
					提示：兑换码由作者提供，请联系作者获取。
				</view>
			</view> -->
			<view class="nav_sidebar_exit" @click="logout" v-if="user.info.name">
				<rui-icons icon="logout" size="30"></rui-icons> 退出登录
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		userStore,
		msgStore,
	} from "@/store/index.js"

	const user = userStore()
	const msg = msgStore()

	let form = ref({
		username: "",
		password: "",
		device_id: user.deivceId
	})

	let show = ref(false)
	
	let login_type = ref("login")
	
	const onRegister = () => {
		login_type.value = 'register'
	}
	const onLogin = () => {
		login_type.value = 'login'
	}

	const onSubmit = () => {
		uni.showLoading({
			title: '登录中'
		});
		uni.request({
			// url: 'http://0.0.0.0:8787/api/login/ajax/'+login_type.value,
			url: 'http://ai.qinhai269.com/api/login/ajax/'+login_type.value,
			method: 'GET',
			data: form.value,
			success: (res) => {
				if (res.data.code == 400) {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					return false;
				}
				if (res.data.code == 0) {
					uni.showToast({
						title: "登录成功",
						success() {
							form.value.username = "";
							form.value.password = "";
							user.setInfo(res.data.data)
							show.value = false;
							uni.hideLoading();
							setTimeout(() => {
								location.reload()
							}, 1000)
						}
					})
				}
			}
		});
	}

	const logout = () => {
		show.value = false;

		uni.showModal({
			title: '退出提示',
			content: '您确定要退出系统？',
			success: function(res) {
				if (res.confirm) {
					user.logout()
					msg.clear()
				}
			}
		});
	}

	const open = () => {
		show.value = !show.value
	}

	defineExpose({
		open
	})
</script>

<style lang="scss">
	.login {
		&_head {
			margin-top: 50rpx;

			&_welcome {
				font-size: 40rpx;
				font-weight: bold;
				color: #fff;
			}

			&_desc {
				font-size: 24rpx;
				color: rgba(255, 255, 255, .6);
				margin-top: 10rpx;
			}
		}

		&_form {
			margin-top: 100rpx;

			&_item {
				margin: 50rpx 0;
				position: relative;

				&_button {
					background: var(--color);
					color: #fff;
					border-radius: 50rpx;
					margin-top: 60rpx;
				}

				&_icon {
					position: absolute;
					left: 0;
					top: 10rpx;
				}

				&_input {
					border-bottom: 1rpx solid #ddd;
					padding: 10rpx 0;
					font-size: 32rpx;
				}
			}
		}
	}

	.navShow {
		left: 0;
	}

	.navHide {
		left: -300vh;
	}

	.nav {
		transition: left 0.3s ease;
		/* 平滑过渡效果 */
		position: fixed;
		width: 100vh;
		height: 100vh;
		top: 0;
		z-index: 999;

		&_sidebar {
			position: fixed;
			width: 80%;
			height: 100vh;
			top: 0;
			z-index: 9;
			background: #fff;
			box-shadow: 0 0 25rpx rgba(0, 0, 0, .2);

			&_exit {
				position: absolute;
				bottom: 20px;
				left: calc(50% - 80rpx);
				width: 180rpx;
			}

			&_user {
				text-align: center;
				padding: 50rpx 0;
				background: var(--color);

				&_name {
					margin: 10rpx 0;
					color: #fff;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_expired {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.6);
				}
			}

			&_body {
				margin: 30rpx;

				&_tips {
					font-size: 22rpx;
					color: #aaa;
				}

				&_form {
					&_item {
						margin: 20rpx 0;

						&_input {
							background: #eee;
							padding: 20rpx;
							border-radius: 20rpx;
						}
					}
				}

				&_head {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&_name {
						font-weight: bold;
					}

					&_btn {
						background: var(--color);
						color: #fff;
						border-radius: 30rpx;
						padding: 10rpx 30rpx;
						font-size: 28rpx;
					}
				}

			}
		}

		&_cover {
			position: fixed;
			width: 200vh;
			height: 100vh;
			// background: #eee;
		}
	}
</style>